<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Responsive Web UI Kit &amp; Dashboard Template based on Bootstrap">
    <meta name="author" content="AdminKit">
    <meta name="keywords" content="adminkit, bootstrap, web ui kit, dashboard template, admin template">

    <link rel="shortcut icon" href="/img/icons/Bridge-logo-48x48.png"/>

    <title>Bridge index</title>

    <link href="/css/app.css" rel="stylesheet">

    <style>
        .content #show-up {
            display: block;
        }

        .content #show-down {
            display: none;
        }

        #container-map {
            height: 500px;
        }

        .content .position-header {
            padding-bottom: 0;
        }

        .content .position-body {
            padding-top: 0;
            padding-bottom: 0;
        }
    </style>
</head>

<body>
<div class="wrapper">
    <nav id="sidebar" class="sidebar">
        <div class="sidebar-content js-simplebar">
            <a class="sidebar-brand" href="#">
                <span class="align-middle">Bridge</span>
            </a>

            <ul class="sidebar-nav">
                <li class="sidebar-header">
                    Pages
                </li>

                <li class="sidebar-item active">
                    <a class="sidebar-link" href="/caseAnal/index">
                        <i class="align-middle" data-feather="sliders"></i>
                        <span class="align-middle">案件审核</span>
                    </a>
                </li>

                <li class="sidebar-item">
                    <a class="sidebar-link" href="/caseAnal/viewCommand">
                        <i class="align-middle" data-feather="sliders"></i>
                        <span class="align-middle">指挥处理</span>
                    </a>
                </li>

                <li class="sidebar-header">
                    Account
                </li>

                <li class="sidebar-item">
                    <a class="sidebar-link" href="#">
                        <i class="align-middle" data-feather="sliders"></i>
                        <span class="align-middle">退出登录</span>
                    </a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="main">
        <nav class="navbar navbar-expand navbar-light navbar-bg">
            <a class="sidebar-toggle d-flex">
                <i class="hamburger align-self-center"></i>
            </a>

            <form class="form-inline d-none d-sm-inline-block">
                <div class="input-group input-group-navbar">
                    <input type="text" class="form-control" placeholder="Search…" aria-label="Search">
                    <div class="input-group-append">
                        <button class="btn" type="button">
                            <i class="align-middle" data-feather="search"></i>
                        </button>
                    </div>
                </div>
            </form>

            <div class="navbar-collapse collapse">
                <ul class="navbar-nav navbar-align">
                    <li style="display: none;" class="nav-item dropdown">
                        <a class="nav-icon dropdown-toggle" href="#" id="alertsDropdown" data-toggle="dropdown">
                            <div class="position-relative">
                                <i class="align-middle" data-feather="bell"></i>
                                <span class="indicator">4</span>
                            </div>
                        </a>
                        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0"
                             aria-labelledby="alertsDropdown">
                            <div class="dropdown-menu-header">
                                4 New Notifications
                            </div>
                            <div class="list-group">
                                <a href="#" class="list-group-item">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col-2">
                                            <i class="text-danger" data-feather="alert-circle"></i>
                                        </div>
                                        <div class="col-10">
                                            <div class="text-dark">Update completed</div>
                                            <div class="text-muted small mt-1">Restart server 12 to complete the
                                                update.
                                            </div>
                                            <div class="text-muted small mt-1">30m ago</div>
                                        </div>
                                    </div>
                                </a>
                                <a href="#" class="list-group-item">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col-2">
                                            <i class="text-warning" data-feather="bell"></i>
                                        </div>
                                        <div class="col-10">
                                            <div class="text-dark">Lorem ipsum</div>
                                            <div class="text-muted small mt-1">Aliquam ex eros, imperdiet vulputate
                                                hendrerit et.
                                            </div>
                                            <div class="text-muted small mt-1">2h ago</div>
                                        </div>
                                    </div>
                                </a>
                                <a href="#" class="list-group-item">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col-2">
                                            <i class="text-primary" data-feather="home"></i>
                                        </div>
                                        <div class="col-10">
                                            <div class="text-dark">Login from 192.186.1.8</div>
                                            <div class="text-muted small mt-1">5h ago</div>
                                        </div>
                                    </div>
                                </a>
                                <a href="#" class="list-group-item">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col-2">
                                            <i class="text-success" data-feather="user-plus"></i>
                                        </div>
                                        <div class="col-10">
                                            <div class="text-dark">New connection</div>
                                            <div class="text-muted small mt-1">Christina accepted your request.</div>
                                            <div class="text-muted small mt-1">14h ago</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="dropdown-menu-footer">
                                <a href="#" class="text-muted">Show all notifications</a>
                            </div>
                        </div>
                    </li>
                    <li style="display: none;" class="nav-item dropdown">
                        <a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" data-toggle="dropdown">
                            <div class="position-relative">
                                <i class="align-middle" data-feather="message-square"></i>
                            </div>
                        </a>
                        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0"
                             aria-labelledby="messagesDropdown">
                            <div class="dropdown-menu-header">
                                <div class="position-relative">
                                    4 New Messages
                                </div>
                            </div>
                            <div class="list-group">
                                <a href="#" class="list-group-item">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col-2">
                                            <img src="/img/avatars/avatar-5.jpg" class="avatar img-fluid rounded-circle"
                                                 alt="Vanessa Tucker">
                                        </div>
                                        <div class="col-10 pl-2">
                                            <div class="text-dark">Vanessa Tucker</div>
                                            <div class="text-muted small mt-1">Nam pretium turpis et arcu. Duis arcu
                                                tortor.
                                            </div>
                                            <div class="text-muted small mt-1">15m ago</div>
                                        </div>
                                    </div>
                                </a>
                                <a href="#" class="list-group-item">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col-2">
                                            <img src="/img/avatars/avatar-2.jpg" class="avatar img-fluid rounded-circle"
                                                 alt="William Harris">
                                        </div>
                                        <div class="col-10 pl-2">
                                            <div class="text-dark">William Harris</div>
                                            <div class="text-muted small mt-1">Curabitur ligula sapien euismod vitae.
                                            </div>
                                            <div class="text-muted small mt-1">2h ago</div>
                                        </div>
                                    </div>
                                </a>
                                <a href="#" class="list-group-item">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col-2">
                                            <img src="img/avatars/avatar-4.jpg" class="avatar img-fluid rounded-circle"
                                                 alt="Christina Mason">
                                        </div>
                                        <div class="col-10 pl-2">
                                            <div class="text-dark">Christina Mason</div>
                                            <div class="text-muted small mt-1">Pellentesque auctor neque nec urna.</div>
                                            <div class="text-muted small mt-1">4h ago</div>
                                        </div>
                                    </div>
                                </a>
                                <a href="#" class="list-group-item">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col-2">
                                            <img src="/img/avatars/avatar-3.jpg" class="avatar img-fluid rounded-circle"
                                                 alt="Sharon Lessman">
                                        </div>
                                        <div class="col-10 pl-2">
                                            <div class="text-dark">Sharon Lessman</div>
                                            <div class="text-muted small mt-1">Aenean tellus metus, bibendum sed,
                                                posuere ac, mattis non.
                                            </div>
                                            <div class="text-muted small mt-1">5h ago</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="dropdown-menu-footer">
                                <a href="#" class="text-muted">Show all messages</a>
                            </div>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#" data-toggle="dropdown">
                            <i class="align-middle" data-feather="settings"></i>
                        </a>

                        <a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#" data-toggle="dropdown">
                            <img src="/img/avatars/avatar.jpg" class="avatar img-fluid rounded mr-1"
                                 alt="Charles Hall"/> <span class="text-dark" th:text="${session.username}"></span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="pages-profile.html"><i class="align-middle mr-1"
                                                                                  data-feather="user"></i> 用户信息</a>
                            <a class="dropdown-item" href="#"><i class="align-middle mr-1" data-feather="pie-chart"></i>
                                数据分析</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="pages-settings.html">
                                <i class="align-middle mr-1" data-feather="settings"></i>
                                设置
                            </a>
                            <a class="dropdown-item" href="#"><i class="align-middle mr-1"
                                                                 data-feather="help-circle"></i> 帮助中心</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">退出登录</a>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>

        <main class="content">
            <div class="container-fluid p-0">

                <div class="row mb-2 mb-xl-3">
                    <div class="col-auto d-none d-sm-block">
                        <h3>待审核案件处理</h3>
                    </div>

                    <div class="col-auto ml-auto text-right mt-n1">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb bg-transparent p-0 mt-1 mb-0">
                                <li class="breadcrumb-item"><a href="#">Bridge</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Checking</li>
                            </ol>
                        </nav>
                    </div>
                </div>
                <div class="row table_list" id="show-up">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title">待审核的案件列表</h5>
                            </div>
                            <div class="table-responsive">
                                <table class="table mb-0">
                                    <thead>
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">走失者</th>
                                        <th scope="col">性别</th>
                                        <th scope="col">报案人</th>
                                        <th scope="col">第一联系人电话</th>
                                        <th scope="col">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row table_info" id="show-down">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header position-header">
                                <h5 class="card-title">走失地点位置分析</h5>
                            </div>
                            <div class="card-body position-body">
                                <div class="card position-map">
                                    <div id="container-map"></div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title">待审核案件详细信息</h5>
                                <ul class="nav nav-tabs card-header-tabs pull-right" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" data-toggle="tab" href="#tab-1">必要信息</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-toggle="tab" href="#tab-2">次要信息</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="card-body">
                                <div class="tab-content">
                                    <div class="tab-pane fade active show" id="tab-1" role="tabpanel">
                                        <table class="table mb-0">
                                            <thead>
                                            <tr>
                                                <th scope="col">信息</th>
                                                <th scope="col">具体</th>
                                            </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                    <div class="tab-pane fade" id="tab-2" role="tabpanel">
                                        <table class="table mb-0">
                                            <thead>
                                            <tr>
                                                <th scope="col">信息</th>
                                                <th scope="col">具体</th>
                                            </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                    <button class="btn btn-outline-primary get-checked">审核通过</button>
                                    <button class="btn btn-outline-primary get-return">返回</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </main>

        <footer class="footer">
            <div class="container-fluid">
                <div class="row text-muted">
                    <div class="col-6 text-left">
                        <p class="mb-0">
                            <a href="index.html" class="text-muted"><strong>Bridge Rescue System</strong></a> &copy;
                        </p>
                    </div>
                    <div class="col-6 text-right">
                        <ul class="list-inline">
                            <li class="list-inline-item">
                                <a class="text-muted" href="#">Support</a>
                            </li>
                            <li class="list-inline-item">
                                <a class="text-muted" href="#">Help Center</a>
                            </li>
                            <li class="list-inline-item">
                                <a class="text-muted" href="#">Privacy</a>
                            </li>
                            <li class="list-inline-item">
                                <a class="text-muted" href="#">Terms</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</div>

<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>

<script>
    $(function () {
        $('#datetimepicker-dashboard').datetimepicker({
            inline: true,
            sideBySide: false,
            format: 'L'
        });
    });
</script>

<!--自己添加的-->
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=DXPBZ-ZQDLX-IWF4F-TL55C-Q37ZQ-66B3G"></script>
<script src="/js/jquery-3.5.1.js"></script>
<script>
    $(function () {
        $.ajax({
            url     : "/caseAnal/uncheckedList",
            type    : "GET",
            success : function (data) {
                var list = data.data.all_case;
                var tabel_list = $('.content .table_list .card .table-responsive tbody');

                for (var i = 0; i < list.length; i++) {
                    tabel_list.append('<tr>' +
                        '<th scope="row">'+ list[i].case_id.substr(1) +'</th>'+
                        '<td>'+ list[i].name +'</td>' +
                        '<td>'+ list[i].sex +'</td>' +
                        '<td>'+ list[i].informant_name +'</td>' +
                        '<td>'+ list[i].first_phone +'</td>' +
                        '<td>'+
                            '<button class="btn btn-outline-primary to-check">审核</button>'+
                            '<input type="hidden" value="'+ list[i].case_id +'">'+
                        '</td>'+
                        '</tr>');
                }

                var check_list_btn = $('.content .card .table-responsive tbody .to-check');
                for (var i = 0; i < check_list_btn.length; i++) {
                    check_list_btn[i].onclick = function () {
                        // 获取相应的数据
                        var caseId = $(this).next().attr('value');
                        $.ajax({
                            url     : "/caseAnal/completeCase",
                            type    : "GET",
                            data    : {
                                caseId: caseId
                            },
                            success : function (data) {
                                console.log(data.data.case_id);
                                var Nece_info_list = $('.content .table_info .card #tab-1 tbody');
                                Nece_info_list.append(
                                    '<tr>' +
                                    '<th scope="row">'+ '待审编号' +'</th>'+
                                    '<td>'+ data.data.case_id +'</td>' +
                                    '</tr><tr>' +
                                    '<th scope="row">'+ '走失者姓名' +'</th>'+
                                    '<td>'+ data.data.name +'</td>' +
                                    '</tr><tr>' +
                                    '<th scope="row">'+ '走失者年龄' +'</th>'+
                                    '<td>'+ data.data.age +'</td>' +
                                    '</tr><tr>' +
                                    '<th scope="row">'+ '走失者性别' +'</th>'+
                                    '<td>'+ data.data.sex +'</td>' +
                                    '</tr><tr>' +
                                    '<th scope="row">'+ '第一联系人电话' +'</th>'+
                                    '<td>'+ data.data.first_phone +'</td>' +
                                    '</tr><tr>' +
                                    '<th scope="row">'+ '第一联系人邮箱' +'</th>'+
                                    '<td>'+ data.data.first_email +'</td>' +
                                    '</tr><tr>' +
                                    '<th scope="row">'+ '第一联系人住址' +'</th>'+
                                    '<td>'+ data.data.first_address +'</td>' +
                                    '</tr><tr>' +
                                    '<th scope="row">'+ '穿着描述' +'</th>'+
                                    '<td>'+ data.data.dressing +'</td>' +
                                    '</tr><tr>' +
                                    '<th scope="row">'+ '可能离家方式' +'</th>'+
                                    '<td>'+ data.data.wayToLeave +'</td>' +
                                    '</tr><tr>' +
                                    '<th scope="row">'+ '报案人姓名' +'</th>'+
                                    '<td>'+ data.data.informant_name +'</td>' +
                                    '</tr><tr>' +
                                    '<th scope="row">'+ '报案人身份证号' +'</th>'+
                                    '<td>'+ data.data.informant_ID +'</td>' +
                                    '</tr><tr>' +
                                    '<th scope="row">'+ '报案人关系' +'</th>'+
                                    '<td>'+ data.data.relation +'</td></tr>'
                                );

                                var Unne_info_list = $('.content .table_info .card #tab-2 tbody');
                                Unne_info_list.append(
                                    '<tr>' +
                                    '<th scope="row">'+ '待审编号' +'</th>'+
                                    '<td>'+ data.data.case_id +'</td>' +
                                    '</tr><tr>' +
                                    '<th scope="row">'+ '第二联系人电话' +'</th>'+
                                    '<td>'+ data.data.second_phone +'</td>' +
                                    '</tr><tr>' +
                                    '<th scope="row">'+ '第二联系人住址' +'</th>'+
                                    '<td>'+ data.data.second_address +'</td>' +
                                    '</tr><tr>' +
                                    '<th scope="row">'+ '可能去的地方' +'</th>'+
                                    '<td>'+ data.data.possible_place +'</td>' +
                                    '</tr><tr>' +
                                    '<th scope="row">'+ '老人爱好' +'</th>'+
                                    '<td>'+ data.data.hobby +'</td>' +
                                    '</tr><tr>' +
                                    '<th scope="row">'+ '老人疾病' +'</th>'+
                                    '<td>'+ data.data.illness +'</td>' +
                                    '</tr><tr>' +
                                    '<th scope="row">'+ '需要的药物' +'</th>'+
                                    '<td>'+ data.data.medicine +'</td></tr>'
                                );

                                var pos = {
                                    latitude: data.data.latitude,
                                    longtitude: data.data.longtitude,
                                    case_id: data.data.case_id,
                                    lost_name: data.data.name
                                };

                                initMap(pos);
                            }
                        });

                        $('.table_list').attr('id', 'show-down');
                        $('.table_info').attr('id', 'show-up');

                    }
                }

            }
        });

        var get_return = $('.content .card .get-return');
        get_return.on('click', function () {
            $('.table_list').attr('id', 'show-up');
            $('.table_info').attr('id', 'show-down');

            $('.content .table_info .card #tab-1 tbody').empty();
            $('.content .table_info .card #tab-2 tbody').empty();
        });

        function initMap(pos) {
            //定义地图中心点坐标
            var center = new TMap.LatLng(pos.latitude, pos.longtitude);
            //定义map变量，调用 TMap.Map() 构造函数创建地图
            var map = new TMap.Map(document.getElementById('container-map'), {
                center: center,//设置地图中心点坐标
                zoom: 17.2   //设置地图缩放级别
            });

            //创建并初始化MultiMarker
            var markerLayer = new TMap.MultiMarker({
                map: map,  //指定地图容器
                //样式定义
                styles: {
                    //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
                    "myStyle": new TMap.MarkerStyle({
                        "width": 25,  // 点标记样式宽度（像素）
                        "height": 35, // 点标记样式高度（像素）
                        "src": '/img/location.png',  //图片路径
                        //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
                        "anchor": { x: 16, y: 32 }
                    })
                },
                //点标记数据数组
                geometries: [{
                    "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
                    "styleId": 'myStyle',  //指定样式id
                    "position": new TMap.LatLng(pos.latitude, pos.longtitude),  //点标记坐标位置
                    "properties": {//自定义属性
                        "title": "丢失地点"
                    }
                }]
            });
        }
    });
</script>

</body>

</html>